<template>
  <div class="core-head px-0">
    <div>
      <ul class="flex tabs align-center">
        <li
          v-for="item in browserList"
          :key="item.id"
          class="flex align-center gc-4 justify-between"
          :class="getKlass(item)"
          @click="selectLink(item)"
        >
          <div class="flex align-center gc-4">
            <img :src="getWebIcon(item.src)" width="16" />
            <div class="web-title">
              {{ item.title }}
            </div>
          </div>
          <div class="icon-button close-button" @click="deleteTab(item)">
            <img :src="closePng" width="14" />
          </div>
        </li>
      </ul>
    </div>
    <div class="flex gc-4 pr-12">
      <div v-if="isFullscreen" class="icon-button" @click="fullscreen">
        <img :src="minPng" width="16" />
      </div>
      <div v-else class="icon-button" @click="restore">
        <img :src="maxPng" width="16" />
      </div>
      <div class="icon-button" @click="showBrowser = false">
        <img :src="closePng" width="16" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import maxPng from '@/assets/images/max.png';
  import minPng from '@/assets/images/min.png';
  import closePng from '@/assets/images/close.png';
  import { getWebIcon } from '@/views/bus';
  import { ref } from 'vue';
  import {
    BrowserItem,
    browserList,
    currentLink,
    links,
    showBrowser,
  } from '../bus';

  const emit = defineEmits(['fullscreen', 'restore']);

  const isFullscreen = ref(false);
  const fullscreen = () => {
    emit('restore');
    isFullscreen.value = !isFullscreen.value;
  };
  const restore = () => {
    emit('fullscreen');
    isFullscreen.value = !isFullscreen.value;
  };
  const deleteTab = (item: BrowserItem) => {
    links.value = links.value.filter((e) => e.id !== item.id);
    if (links.value[0]) {
      currentLink.value.id = links.value[0].id;
      currentLink.value.src = links.value[0].src;
      currentLink.value.title = links.value[0].title;
      currentLink.value.update = links.value[0].update;
    }
    if (links.value.length === 0) {
      showBrowser.value = false;
    }
  };
  const selectLink = (item: BrowserItem) => {
    currentLink.value = item;
  };
  const getKlass = (item: BrowserItem) => {
    return [
      { active: item.id === currentLink.value.id },
      links.value.length > 3 ? 'mini' : '',
    ];
  };
</script>

<style lang="scss" scoped>
  .core-head {
    background-color: #f5f2f3;

    .tabs {
      height: 36px;
      cursor: pointer;
      overflow: hidden;
      border-top-left-radius: 4px;
      li {
        height: 36px;
        background-color: #ddd;
        line-height: 36px;
        padding: 0 8px;
        width: 120px;
        opacity: 0.8;
        .icon-button {
          opacity: 0;
        }
        &:hover {
          opacity: 1;
          .icon-button {
            opacity: 1;
          }
        }
      }
      li.active {
        background-color: var(--primary);
        opacity: 1;
        .close-button {
          opacity: 1;
        }
      }
    }
    .web-title {
      max-width: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mini {
      width: 60px !important;
      .web-title {
        display: none;
      }
    }
    .close-button {
      width: 18px;
      height: 18px;
    }
  }
</style>
